<template>
  <v-app>
    <div style="padding: 0vw 7vw">
      <div class="loading_box" v-if="loading">
        <v-progress-circular indeterminate color="primary"></v-progress-circular>
      </div>
      <v-form ref="topic" v-model="valid" lazy-validation>
        <v-text-field style="margin-top: 3vw;" v-model="topic.title" label="标题"></v-text-field>
        <v-textarea
            solo v-model="topic.content"
            color="teal"
            label="这一刻的想法..."
            :rules="contentRules"
        >
        </v-textarea>
        <div class="image_box">
          <div class="pictureList">
            <ul>
              <li v-for="(item,index) in [{},{},{},{},{}]" :key="index"><img src="http://pic.people.com.cn/NMediaFile/2022/0103/MAIN202201030952000207367792476.jpg"/></li>
              <li>
                <el-upload
                  action="http://8.140.13.74:8083/upload"
                  list-type="picture-card"
                  :multiple="true"
                  :on-preview="handlePictureCardPreview"
                  :on-progress="handlePictureProgress"
                  :on-success="handleUploadResult"
                  :show-file-list="false"
                  :fileList="fileList"
                  :on-change="fileChange"
                >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}" style="width: 100%;height: 100%;background:black">
                  <img class="el-upload-list__item-thumbnail_v1" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file,fileList)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              </li>
            </ul> 
          </div>
          
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;margin-top: 10vw">
          <v-btn :disabled="!valid" color="success" @click="publish">确认</v-btn>
        </div>
      </v-form>
    </div>
  </v-app>

</template>

<script>
export default {
  name: "TopicPublish",
  data: () => ({
    loading: false,
    valid: true,
    subject: {},
    topic: {
      communityId: 1,
      subjectId: null,
      subjectName: null,
      title: null,
      content: null,
      images: [],
      userId: 1,
      userName: "zhu_peng"
    },
    subjects: [],
    items: [
      {id: '1', name: 'FL'},
      {id: '2', name: 'GA'},
      {id: '3', name: 'NE'},
      {id: '4', name: 'CA'},
      {id: '5', name: 'NY'}
    ],
    titleRules: [
      v => !!v || '标题不能为空!',
      // v => (v && v.length <= 10) || 'Name must be less than 10 characters',
    ],
    contentRules: [
      v => !!v || '内容不能为空!'
    ],
    dialogImageUrl: '',
    dialogVisible: false,
    disabled: false,
    fileList: [],
    fileMap: {}
  }), mounted() {
    // this.getAllSubjects();
  }, methods: {
    getAllSubjects() {
      console.log("请求所有主题")
      // 查询所有帖子主题
      this.$axios({
        method: 'get',
        url: this.global.get_all_subject_url,
        headers: {'Content-Type': 'application/json'},
      }).then((response) => {
        if (response.data.code == 200) {
          this.subjects = response.data.data;
        } else {
          console.error(response.data)
        }
        //请求成功返回的数据
      }).catch((error) => {
        console.log(error);
      })
    },
    saveTopic() {
      this.loading = true;
      setTimeout(() => {
        this.$axios({
          method: 'post',
          url: this.global.save_topic_url,
          headers: {'Content-Type': 'application/json'},
          data: JSON.stringify(this.topic)
        }).then((response) => {
          if (response.data.code == 200) {
            console.log("发帖成功!", response.data)
            this.$router.push({path: '/', query: {id: '1'}});
          } else {
            console.log("发帖失败! /n", response.data)
          }
          this.loading = false;
          //请求成功返回的数据
        }).catch((error) => {
          console.log(error);
          this.loading = false;
        })
      }, 1000);
    },
    validate() {
      return this.$refs.topic.validate()
    },
    cancel() {
    },
    publish() {
      let inValid = this.validate();
      if (inValid == false) {
        alert("表单校验失败")
        return
      }
      console.log("images -> ", this.topic.images)
      // this.topic.subjectId = this.subject.id;
      // this.topic.subjectName = this.subject.name;
      for (let uid in this.fileMap) {
        this.topic.images.push(this.fileMap[uid]);
      }
      console.log("topic -> ", JSON.stringify(this.topic))
      console.log(this.topic.images)
      this.saveTopic();
    },
    // 文件改变时
    fileChange(file, fileList) {
      this.fileList = fileList
    },
    // 上传加载中
    handlePictureProgress(){

    },
    handleUploadResult(response, file) {
      let uid = file.uid;
      let url = response.data;
      if (response.code == 200) {
        this.fileMap[uid] = url;
      }
    },
    handleDownload(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log("删除文件 " + file.uid)
      for (const i in fileList) {
        if (fileList[i].uid === file.uid) {
          this.fileList.splice(i, 1)
        }
      }
      this.fileList = fileList
      // 删除文件,参考publish方法
      delete this.fileMap[file.uid]
    }
  }
}
</script>

<style scoped>
ul,li{
  list-style: none;
}
/* 图片上传 */
.pictureList ul{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.pictureList ul li{
  width:33.333%;
  height:26.5vw;
}
.pictureList ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-btn{
  width: 100%;
  height: 50px!important;
  box-shadow: none;
  font-size: 16px;
}
/deep/.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot{
 box-shadow: none;
 padding: 0;
}
/deep/.v-text-field__details{
  display: none;
}
.loading_box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
}

.el-upload-list__item-thumbnail_v1 {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.image_box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* align-items: center; */
  /* align-content: space-around; */
  /* border: 1px solid blueviolet; */
}
.v-application ol, .v-application ul {
  padding-left: 0px;
  width: 80vw;
  height: auto;
}

.el-upload-list--picture-card .el-upload-list__item {
  margin: 0px 0px 0px 0px;
  width: 33.33%;
  height: 26.5vw;
}

.el-upload-list__item {
  width: 20vw;
  height: 100%;
}

.el-upload-list--picture-card {
  width: 100%;
  margin: 0px 0px 0px 0px;
  display: flex;
  align-content: space-between;
  align-items: center;
  flex-flow: wrap;
  overflow: hidden;
  border-radius: 6px;
  box-sizing: border-box;
}


/deep/.el-upload--picture-card {
  width: 100%;
  height: 26.5vw;
  line-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #f4f4f4;
  border-radius: 0px;
}


el-upload el-upload--picture-card i {
  vertical-align: middle;
  text-align: center;
}
</style>